<template>
  <view class="coupon-page">
    <!--  <view class="header">
      <text class="title">优惠券</text>
    </view> -->

    <view v-for="(item, index) in couponList" :key="index" class="coupon_box">
      <view class="left">
        <view class="left_top">
          <text class="hui">券</text>
          <text class="hui_name">{{ item.name }}</text>
        </view>
        <view class="left_bottom">
          <text>领取日期：{{ item.receiveStartTime }} 至{{ item.receiveEndTime }}</text>
        </view>
        <image src="./components/ylq.png" v-if="item.status == 1" class="ylq"></image>
      </view>
      <view class="right">
        <view v-if="item.deductionBl > 0" class="money">{{ Number(item.deductionBl).toFixed(1) }}折优惠券</view>
        <view v-if="item.deductionBl == 0" class="money">{{ item.money }}元优惠券</view>
        <text v-if="item.minPrice != 0">满{{ item.minPrice }}可用</text>
        <text v-if="item.minPrice == 0">无门槛</text>
      </view>

      <view class="bottom">
        <view> 适用店铺：{{ item.ebMerName }}，适用活动：{{ item.ebMerActivityName }} </view>

        <view class="receiveBtn" :style="{ background: item.status != 1 ? '#fa436a' : '#fbbd08' }" @tap="onreceive(item, index)">{{ item.status != 1 ? "领取" : "立即使用" }}</view>
      </view>
    </view>

    <view v-if="loading" class="loading"> 加载中... </view>

    <view v-if="noMoreData && couponList.length === 0" class="no-data"> 暂无优惠券 </view>
  </view>
</template>

<script>
import { ebCouponList } from "../../../utils/api/local";

export default {
  data() {
    return {
      couponList: [],
      page: 1,
      limit: 10,
      loading: false,
      noMoreData: false,
    };
  },

  onLoad() {
    this.loadCouponList();
  },

  onReachBottom() {
    if (!this.loading && !this.noMoreData) {
      this.page++;
      this.loadCouponList();
    }
  },

  methods: {
    loadCouponList() {
      this.loading = true;

      const params = {
        type: 4,
        productId: 0,
        page: this.page,
        limit: this.limit,
      };

      ebCouponList(params)
        .then((res) => {
          if (res.code == 200) {
            if (this.page === 1) {
              this.couponList = res.rows;
            } else {
              this.couponList = [...this.couponList, ...res.rows];
            }

            // 判断是否还有更多数据
            if (this.couponList.length >= res.total) {
              this.noMoreData = true;
            }
          } else {
            uni.showToast({
              title: res.msg || "数据加载失败",
              icon: "none",
            });
          }
        })
        .catch((err) => {
          console.error("优惠券列表加载失败:", err);
          uni.showToast({
            title: "网络请求失败",
            icon: "none",
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },

    onreceive(item, index) {
      //领取优惠券
      if (item.status == 1) {
        // 立即使用逻辑，可以跳转到相关页面
        uni.showToast({
          title: "立即使用",
          icon: "none",
        });
        return;
      } else {
        // 这里应该调用领取优惠券的接口
        // 领取成功后更新状态
        this.couponList[index].status = 1;
        uni.showToast({
          title: "领取成功",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20upx;
}

.header {
  background-color: #fff;
  padding: 30upx;
  text-align: center;
  border-bottom: 1upx solid #eee;

  .title {
    font-size: 36upx;
    font-weight: bold;
  }
}

.coupon_box {
  margin: 20upx;
  padding: 20upx;
  box-shadow: 0upx 0upx 10upx #ddd;
  position: relative;
  border-radius: 10upx;
  padding-bottom: 10upx;
  overflow: hidden;
  background-color: #fff;
}

.coupon_box .left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1upx solid #eee;
  padding-bottom: 20upx;
  position: relative;
}

.coupon_box .left .ylq {
  width: 60upx;
  height: 45upx;
  position: absolute;
  top: 0;
  right: 140upx;
}

.coupon_box .left .hui {
  width: 40upx;
  height: 40upx;
  font-size: 22upx;
  color: #fff;
  background-color: rgba(255, 84, 110, 0.8);
  border-radius: 8upx;
  line-height: 40upx;
  text-align: center;
  display: inline-block;
  transform: translateY(-5upx);
}

.coupon_box .left .left_top {
  width: 80vw;
  display: block;
  font-size: 26upx;
  font-weight: bold;
}

.left_top .hui_name {
  line-height: 60upx;
  height: 60upx;
  margin-left: 20upx;
  display: inline-block;
  font-size: 28upx;
}

.left_bottom {
  font-size: 24upx;
  font-weight: 500;
  color: #333;
  height: 60upx;
  line-height: 60upx;
}

.coupon_box .right {
  position: absolute;
  right: 20upx;
  top: 25upx;
  text-align: center;
}

.coupon_box .right .money {
  font-size: 45upx;
  margin-bottom: 10upx;
  color: #fa436a;
}

.coupon_box .right text {
  font-size: 24upx;
  color: #999;
}

.coupon_box .bottom {
  height: 60upx;
  line-height: 60upx;
  display: flex;
  align-content: flex-start;
  font-size: 24upx;
  margin-top: 10upx;
}

.coupon_box .bottom view {
  margin-right: 20upx;
  color: #888;
}

.receiveBtn {
  position: absolute;
  left: calc(100vw - 100px);

  width: 58px;
  height: 24px;
  line-height: 24px;

  border-radius: 4px;
  background-color: #fa436a;
  color: white !important;

  font-size: 12px;
  text-align: center;
  margin-top: 2px;
}

.loading {
  text-align: center;
  padding: 20upx;
  font-size: 28upx;
  color: #999;
}

.no-data {
  text-align: center;
  padding: 40upx;
  font-size: 28upx;
  color: #999;
}
</style>
